<template>
  <div>
    <!-- <el-container>
    <el-main>
      <div class="default-main ba-table-box"> -->
    <div style="font-size: 14px; font-weight: bold">实际可用库存</div>
    <TableHeader
      :buttons="['refresh', 'columnDisplay']"
      :quick-search-placeholder="placeholder"
      @action="baTable.onTableHeaderAction"
    />
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table ref="tableRef" :pagination="false" @action="baTable.onTableAction" />
    <!-- </div>
    </el-main>
  </el-container> -->
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { ref, provide, onMounted } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, DictOperation } from "@/utils/common"; // 导入表格api方法生成器
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import { BoardUseableStock } from "@/api/backend/index";
import { useRoute, useRouter } from "vue-router";
import { useNavTabs } from "@/store/navTabs";
import { useDictionary } from "@/store/backend/tool/dictionary";
import type { FormInstance } from "element-plus";
import { useBoardProcessPull } from "@/store/backend/Board/processPull";
import { useDept } from "@/store/backend/SysM/dept";
import { useUser } from "@/store/backend/SysM/user";
import { useFollowProlem } from "@/store/backend/Board/followProlem";

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const router = useRouter();
const navTabs = useNavTabs();
const dictionary = useDictionary();
const dept = useDept();
const user = useUser();
const followProlem = useFollowProlem();
const processPull = useBoardProcessPull();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + BoardUseableStock)
      ? (navTabs as any).pageSizeMap.get(route.path + BoardUseableStock)
      : 10;
  }
  return 10;
};

//初始化字典处理类
const dictOperation = new DictOperation();

//获取字典
const getDictionary = () => {
  //获取问题域的字典
  dictOperation.getDictionary(
    processPull,
    "sys_problem_area",
    "proCate",
    "type"
  );
};
// getDictionary();

//全局事件总线
const { proxy } = useCurrentInstance();
const baTable = new baTableClass(
  new baTableApi(BoardUseableStock), //this.api = api菜单管理相关
  {
    // pk: "id",
    column: [
      // { type: "selection", align: "center", operator: false },
      // {
      //   show: filedShowOff("stNo"),
      //   label: "仓库号",
      //   prop: "stNo",
      //   align: "center",
      //   operator: false,
      // },
      // {
      //   show: filedShowOff("stName"),
      //   label: "仓库名称",
      //   prop: "stName",
      //   align: "center",
      //   operator: false,
      // },
      {
        show: filedShowOff("goodsName"),
        label: "物料名",
        prop: "goodsName",
        align: "center",
        operator: false,
      },
      // {
      //   show: filedShowOff("goodsSpec"),
      //   label: "物料规格",
      //   prop: "goodsSpec",
      //   align: "center",
      //   operator: false,
      // },
      {
        show: filedShowOff("endQty"),
        label: "可用库存",
        prop: "endQty",
        align: "center",
        operator: false,
        render: "customTemplate",
        customTemplate: (row: TableRow, field: TableColumn, value: any) => {
          if (value == "-") {
            return "<p>" + value + "</p>";
          }
          return "<p>" + (value - 0).toFixed(0) + "</p>";
        },
      },
      // {
      //   show: filedShowOff("minQty"),
      //   label: "最小库存数",
      //   prop: "minQty",
      //   align: "center",
      //   operator: false,
      //   render: "customTemplate",
      //   customTemplate: (row: TableRow, field: TableColumn, value: any) => {
      //     if (value == "-") {
      //       return "<p>" + value + "</p>";
      //     }
      //     return "<p>" + (value - 0).toFixed(1) + "</p>";
      //   },
      // },
    ],
    filter: {
      pageSize: 9999,
      goodsNo: processPull.single.goodsNo,
    },
    extend: {
      column: false, //是否合并行
      maxHeight: window.innerHeight > 800 ? 200 : 115,
    },
  },
  {
    // 默认表单数据(添加)
    // defaultItems: {
    //   siteOrder: 1,
    //   siteType: 0, //0为地区类型
    // },
  },
  {
    onSubmit: ({
      formEl,
      operate,
      items,
    }: {
      formEl: FormInstance | undefined;
      operate: string;
      items: anyObj;
    }) => {
      console.log("表单提交前", formEl, operate, items);
      return true;
    },
  }
);

onMounted(() => {
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(BoardUseableStock);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      if (!baTable.activate) return;
      //回滚功能暂无
      if (data.name == "rollback") {
        // onRollback([data.row[baTable.table.pk!]])
      } else if (data.name == "info") {
      }
    }
  );
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
provide("dictionary", dictionary);
provide("dictOperation", dictOperation);
provide("processPull", processPull);
provide("followProlem", followProlem);
provide("dept", dept);
provide("user", user);
provide("router", router);
</script>
<style lang="scss" scoped>
// .el-main {
//   padding: 0;
// }
// .default-main {
//   margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
// }

// :deep(.table-header) {
//   background-color: #409eff !important;
// }
:deep(.table-header-cell) {
  color: white;
  background-color: #409eff !important;
}
</style>
